<template>
  <view class="container">
		<nav-ber :title="'查看协议'" :bgColor="'#f7f8ff'"></nav-ber>
		<view style="font-weight: 900;text-align: center;margin: 20rpx 0;font-size: 38rpx;">
			{{ listAgree[type] && listAgree[type].name }}
		</view>
		<view class="province">
			<view style="color: gray;font-size: 30rpx;" v-html="content">
			</view>
			<view class="sin_flex" style="margin: 40rpx 0;">
				<view style="display: flex;">甲方签字：</view>
				<view style="width: 300rpx;">签字时间：</view>
			</view>
			<view class="sin_flex">
				<view style="display: flex;">乙方签字：
				<view class="" style="position: relative;"  v-if="urlImg">
					<u--image :showLoading="true" :src="urlImg" width="80px" height="80px" @click="clickImgFun"></u--image>
					<!-- <u-icon style="position: absolute;top: -10rpx;right: -10rpx;" name="close-circle-fill" color="#2979ff" size="28"></u-icon> -->
				</view>
				<span v-if="!urlImg" style="color:#2979ff"></span> </view>
				<view style="width: 300rpx;">签字时间：</view>
			</view>
			
		</view>
		<view class="bottom_w">
			<u-button @click="addFun" type="primary" :text="type == 2? '确认' : '下一页'"></u-button>
		</view>
  </view>
</template>
<script>
	import { listByMr, addAgreement, medicalRepresentativeBuId } from '@/api/personalCenter.js'
	import Config from '@/core/config'
	const apiUrl = Config.get('apiUrl')
	
  export default {
    data() {
			return {
				listAgree: [],
				urlImg: '',
				// urlImg: 'https://cdn.uviewui.com/uview/album/1.jpg',
				keyword: '',
				ispro: '1',
				bottonisShow: true,
				type: 0,
				datas: [],
				content: '',
				name: '',
				id: '',
			}
    },
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.id = option.id
			this.listByMrFun()
			this.medicalRepresentativeBuIdFun()
		},
		methods: {
			medicalRepresentativeBuIdFun() {
				medicalRepresentativeBuId(this.id).then((res) => {
					// console.log('fasg21421', res)
					this.datas = res.data.agreementList
					this.urlImg = res.data.agreementList[this.type].mrSignedUrl
				})
			},
			addFun() {
				if (this.type == 2) {
					uni.navigateBack({
						delta: 1,
					})
					return
				}
				this.type++
				this.content = this.listAgree[this.type].content
				this.urlImg = this.datas[this.type]?.mrSignedUrl??''
			},
			listByMrFun() {
				listByMr().then((res) => {
					this.listAgree = res.rows
					this.content = res.rows[0].content
				})
			},
			clickImgFun() {
				uni.previewImage({
						current: 0,
						urls: [this.urlImg],
				})
			},
		}
  }
</script>
<style lang="scss" scoped>
	.container {
		background-color: #f7f8ff;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.province {
		flex: 1;
		overflow: scroll;
		padding: 0 20rpx;
		margin-top: 20rpx;
	}
	.bottom_w {
		margin: 20rpx 50rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.sin_flex {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
	}
</style>
